<template>
  <el-card class="box-card" style="width: 100%;height: 100%">
    <div slot="header" class="clearfix">
      <span style="font-weight:bold;font-size: 20px">VIP用户</span>
      <el-input style="width:200px;margin:0 10px 0 20px"
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="inputSelect">
      </el-input>

      <el-button round @click="search">搜索</el-button>

      <el-button style="float: right; padding: 3px 0" type="text" @click="refresh()">
        <i class="el-icon-refresh-left"><span> 刷新页面</span></i>
      </el-button>
    </div>

    <el-dialog width="40%" title="用户详情" :visible.sync="dialogTableVisible">
      <el-form label-position="left" inline class="demo-table-expand">
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="账号：">
              <span>{{ userData.programmerAccount }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="昵称：">
              <span>{{ userData.nickName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="手机号：">
              <span>{{ userData.programmerTelephone }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱：">
              <span>{{ userData.programmerEmail }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="职业方向：">
              <span>{{ userData.programmerCareer }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司：">
              <span>{{ userData.programmerCompany }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="支付宝账号：">
              <span>{{ userData.alipayAccount }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="微信账号：">
              <span>{{ userData.wechatAccount }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="QQ账号：">
              <span>{{ userData.qqAccount }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册时间：">
              <span>{{ userData.createTime }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </el-dialog>

    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="userAccount"
          label="账号"
          width="230">
      </el-table-column>

      <el-table-column
          prop="nickName"
          label="昵称"
          width="180">
      </el-table-column>

      <el-table-column
          prop="userTelephone"
          label="手机号"
          width="180">
      </el-table-column>

      <el-table-column
          prop="alipayAccount"
          label="支付宝账号"
          width="180">
      </el-table-column>

      <el-table-column
          prop="userEmail"
          label="邮箱"
          width="240">
      </el-table-column>

      <el-table-column
          prop="userCareer"
          width="180"
          label="职业方向">
      </el-table-column>

      <el-table-column
          prop="userCompany"
          width="180"
          label="公司">
      </el-table-column>
      <el-table-column
          label="操作"
          width="250px">

        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.userId)" type="primary"><i class="el-icon-user"></i> 查看</el-button>
          <el-button @click="setBlack(scope.row)" type="info"><i class="el-icon-lock"></i> 设置黑名单</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination style="margin-top: 20px"
                   @current-change="handleCurrentChange"
                   background
                   :current-page.sync="currentPage"
                   layout="prev, pager, next"
                   :total=total>
    </el-pagination>

  </el-card>
</template>

<script>
import Vue from "vue";

export default {
  name: "adminVipUser",
  data() {
    return {
      dialogTableVisible: false,
      inputValue: '',
      inputSelect: '',
      tableData: [],
      userData: {},
      total: 0,
      currentPage: 1
    }
  },
  methods: {
    handleClick(userId) {
      this.dialogTableVisible = true;
      this.getUserData(userId)
    },
    refresh() {
      this.initList();
    },
    handleCurrentChange(newPage) {
      this.getData(newPage, this.inputValue)
    },
    initList() {
      this.currentPage = 1
      this.inputValue = ''
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.getData(this.currentPage, '')
      loading.close()

    },
    search() {
      this.currentPage = 1
      this.inputValue = this.inputSelect
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.getData(this.currentPage, this.inputValue)
      loading.close()
    },
    async getData(pageNum, keyword) {
      const {data: res} = await this.$http.get('/AUC/getVipUser', {
        params: {
          pageNum: pageNum,
          pageSize: 10,
          keyword: keyword
        }
      })
      this.total = res.content.total
      this.tableData = []
      this.tableData = res.content.list
    },
    async getUserData(userId) {
      const {data: res} = await this.$http.get('/programmer/programmerInfo/' + userId)
      this.userData = res.content
    },
    async setBlack(row) {
      const {data: res} = await this.$http.get('/AUC/addToBlacklist', {params: {id: row.userId}})
      if (res) {
        Vue.prototype.$notify.success({
          title: "成功",
          message: '设置成功'
        })
        this.initList();
      } else {
        Vue.prototype.$notify.error({
          title: "失败",
          message: '设置失败'
        })
      }
    }
  },
  mounted() {
    this.initList()
  }
}
</script>

<style scoped>

</style>